<template>
  <div>
    <div
      class="c-w100 c-flex-row c-pv20 c-ph30 c-fs24 c-bg-FFE"
      v-if="isShowMemberTips"
      @click="linkToVipUpgrade"
    >
      <span class="c-fc-sorange">{{ memberTips }}</span>
      <span class="c-fc-smblue">{{ "立即续费 >" }}</span>
    </div>
    <!--modelType类型说明：
1：轮播图  2：导航栏  3：优惠券  4：课程预告  5：预约师资  6：训练营  7：测评  8：语音评测  9：打卡  10：词典
11：直播专区  12：主播约课  13：课程分类  14：特惠专区  15：知识套餐  16：热门专栏  17：交互测评  18:社群  19:精品课程 20:资料库,21:问答,22:分销商城,23:友情链接,24:公司简介 30:面授课-->
    <section v-for="(_item, _index) in modules" :key="_index">
      <div
        class="c-p c-bg-white"
        id="swap"
        v-if="
          _item.modelType == 1 &&
            showSwiperList &&
            _item.items &&
            _item.items.length > 0
        "
      >
        <div
          @click="clickSign"
          v-show="!isSign && companyAuth.enablePoints && isVisitor != 1 && !$isWxApp()"
          class="c-pa c-p-t12 c-p-l12 c-pz10 c-ww100 c-hh60"
        >
          <img
            class="c-pa c-w100"
            src="../../../assets/index_sign.png"
            alt=""
          />
          <div class="c-fc-white c-pa c-fs26 c-w100 c-lh c-p-b12 c-textAlign-c">
            签到
          </div>
        </div>
        <img
          @click="clickGoCourseSearch"
          class="c-pa c-p-t24 c-p-r24 c-pz10 img-ww72 c-hh72"
          src="../../../assets/sousuo.png"
          alt=""
        />
        <swiper :options="swiperOption" ref="swiperMy">
          <swiper-slide v-for="(item, index) in _item.items" :key="index">
            <img
              @click="swiperClick(item.link)"
              class="c-w100"
              :src="$addXossFilter(item.url)"
              :data-url="item.link"
            />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>

      <div
        class="c-bd-b12-f5 c-w100 c-flex-row c-hh260"
        v-if="_item.modelType == 2"
      >
        <div
          class="c-ph16 c-ww160 c-flex-column c-aligni-center c-pt30 theme-bg"
        >
          <div
            class="c-ww70 c-hh70 c-flex-row c-flex-center c-bg-white c-brp50"
            @click="goMember"
          >
            <img class="c-ww60 c-hh60 c-brp50" :src="$addXossFilter(headImgUrl, require('@/assets/defult_head.png'))" alt="" />
          </div>
          <div v-if="hasSubType" class="c-fs20 c-pt10 c-fc-white">
            {{ isVisitor == 1 ? '游客' : subName }}
          </div>
          <div v-else class="c-fs20 c-pt10 c-fc-white">
            {{ $isWxAppIos() ? "" : userRoleState[userRole] }}
          </div>
          <div
            @click="clickVipUp"
            v-if="userRole == 1"
            class="theme-fc theme-bd-b1 c-mt40 c-bg-white c-fs22 c-br36 c-pv8 c-w100 c-textAlign-c"
          >
            升级会员
          </div>
          <div
            @click="clickSpread"
            v-else
            class="theme-fc theme-bd-b1 c-mt40 c-bg-white c-fs22 c-br36 c-pv8 c-w100 c-textAlign-c"
          >
            我要推广
          </div>
        </div>
        <div class="c-flex-grow1 c-w0 c-flex-row c-flexw-wrap">
          <div
            v-if="companyAuth.enablePoints"
            class="c-w33 c-flex-column c-flex-center c-fs24"
            @click="clickGoMyPoints"
          >
            <span class="iconfont c-fs40 c-fc-sgray">&#xe609;</span>
            <div class="c-pt8">{{ companyAuth.integrateName2 }}</div>
          </div>
          <div
            class="c-w33 c-flex-column c-flex-center c-fs24"
            @click="clickGoMyClassmates"
          >
            <span class="iconfont c-fs40 c-fc-sgray">&#xe608;</span>
            <div class="c-pt8">我的{{ isBCompany == 1 ? "蜜友" : "同学" }}</div>
          </div>
          <div
            class="c-w33 c-flex-column c-flex-center c-fs24"
            @click="clickGoScholarship"
          >
            <span class="iconfont c-fs40 c-fc-sgray">&#xe693;</span>
            <div class="c-pt8">奖学金</div>
          </div>
          <div
            v-if="companyAuth.agentLevels > 0"
            class="c-w33 c-flex-column c-flex-center c-fs24"
            @click="clickGoAgent"
          >
            <span class="iconfont c-fs40 c-fs36 c-fc-sgray">&#xe694;</span>
            <div class="c-pt8">{{ customName.serviceProviderName }}</div>
          </div>
          <div
            v-else
            class="c-w33 c-flex-column c-flex-center c-fs24"
            @click="clickWatchList"
          >
            <span class="iconfont c-fs40 c-fs36 c-fc-sgray">&#xe780;</span>
            <div class="c-pt8">观看记录</div>
          </div>
          <div
            v-if="companyAuth.version == 1"
            class="c-w33 c-flex-column c-flex-center c-fs24"
            @click="clickShowQR"
          >
            <span class="iconfont c-fs40 c-fc-sgray">&#xe60b;</span>
            <div class="c-pt8">关注公众号</div>
          </div>
          <div
            class="c-w33 c-flex-column c-flex-center c-fs24"
            @click="changeShowAddTeacher"
          >
            <span class="iconfont c-fs40 c-fc-sgray">&#xe60a;</span>
            <div class="c-pt8">
              {{ isBCompany == 1 ? "蜜友客服" : "班主任" }}
            </div>
          </div>
        </div>
      </div>
      <!-- 领劵中心 -->
      <template
        v-if="
          _item.modelType == 3 &&
            companyAuth.enableRedeemCode == 1 &&
            _item.items.data != null &&
            _item.items.data.length > 0 &&
            !$isWxAppIos()
        "
      >
        <index-three-title-com
          class="c-pb30"
          :titleName="_item.name"
          :titleDesc="_item.desc"
          @clickMore="goValueVoucherList"
        ></index-three-title-com>
        <div class="c-bg-white c-ph24 c-pb30 c-bd-b12-f5">
          <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n c-pb5">
            <div
              class="c-inlineblack"
              v-for="(item, index) in _item.items.data"
              :key="index"
            >
              <div class="couponStyle c-p c-mr20 " v-if="_item.type == 1">
                <div
                  class="exchange-bg c-ph16 c-w100 c-flex-row c-justify-sb c-aligni-center"
                >
                  <div class="c-fs34 c-fc-white">兑换券</div>
                  <div
                    class="fc-coupon c-fs20 c-bg-white c-ww100 c-hh36 c-lh36 c-textAlign-c c-br20"
                    @click="getCoupon(item.redeemCodeId)"
                  >
                    立即领取
                  </div>
                </div>
                <div
                  class="c-fs20 c-fc-sblack c-ph20 c-text-ellipsis1 c-hh50 c-lh50"
                >
                  {{ item.name }}
                </div>
              </div>
              <div class="couponStyle c-p c-mr20 " v-else-if="item.type == 4">
                <div class="coupon-bg c-ph16 c-w100 c-flex-row c-justify-sb c-aligni-center">
                  <div class="c-fs34 c-fc-white">抵价券</div>
                  <div class="fc-coupon c-fs20 c-bg-white c-ww100 c-hh36 c-lh36 c-textAlign-c c-br20" @click="getCoupon(item.redeemCodeId)">
                    立即领取
                  </div>
                </div>
                <div class="c-fs20 c-fc-sblack c-ph20 c-text-ellipsis1 c-hh50 c-lh50"> 适用于预约师资功能</div>
              </div>
              <div class="couponStyle c-p c-mr20 " v-else>
                <div
                  class="coupon-bg c-ph16 c-w100 c-flex-row c-justify-sb c-aligni-center"
                >
                  <div class="c-fc-white c-flex-column c-justify-sb c-pb8">
                    <div v-if="item.type == 5" class="c-fs22 c-fw-b">
                      <span class="c-fs42">{{ Number(item.price) }}</span
                      >折
                    </div>
                    <div v-else class="c-fs42 c-fw-b">
                      <span class="c-fs22">{{ "￥" | iosPriceFilter }}</span
                      >{{ Number(item.price) }}
                    </div>
                    <div class="c-fs18">
                      {{
                        Number(item.amount) > 0
                          ? "满" + Number(item.amount) + "元可用"
                          : "无使用门槛"
                      }}
                    </div>
                  </div>
                  <div
                    class="fc-coupon c-fs20 c-bg-white c-ww100 c-hh36 c-lh36 c-textAlign-c c-br20"
                    @click="getCoupon(item.redeemCodeId)"
                  >
                    立即领取
                  </div>
                </div>
                <div
                  class="c-fs20 c-fc-sblack c-ph20 c-text-ellipsis1 c-hh50 c-lh50"
                >
                  {{
                    item | couponApplyText
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <!-- 课程预告 -->
      <template v-if="_item.modelType == 4 && _item.items">
        <index-three-title-com
          class="c-pb20"
          :titleName="_item.name"
          :titleDesc="_item.desc"
          :showMore="false"
        ></index-three-title-com>
        <div class=" c-ph24 c-pt30 c-pb40 c-bd-b12-f5">
          <div
            @click="clickCourseForenotice(_item.items.courseId)"
            class="c-text-hidden c-maxh270 c-p c-br10"
          >
            <img
              class="c-w100 imgCloseBig c-br10"
              :src="$addXossFilter(_item.items.courseAvatar)"
              alt=""
            />
            <div
              @click.stop="clickForenoticeQrcode(_item.items.courseId)"
              class="c-pa c-p-t24 c-p-r24 c-bg-white c-brp50 c-hh60 c-ww60 c-flex-row c-flex-center c-fs22"
            >
              推广
            </div>
          </div>
          <div class="c-ph24 c-fs28 c-fc-gray c-pt16">{{ _item.items.liveAt }}</div>
        </div>
      </template>
      <!-- 小班课 -->
      <div
        class="c-bd-b12-f5 c-ph24 c-pb20 c-bd-b1"
        v-if="
          _item.modelType == 29 &&
            _item.items.data &&
            _item.items.data.length > 0 &&
            companyAuth.enableLivePrivateClass == 1
        "
      >
        <div class="c-pt40 c-flex-row c-aligni-center">
          <span class="c-fs30 c-lh c-pl20 c-fw-b c-p">
            <span
              class="c-pa theme-bd-l2 theme-bd-r2 c-w0 c-h c-p-l0 c-br8"
            ></span>
            {{ _item.name }}</span
            >
          <span
            class="c-fs18 c-fc-sblack c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1"
          >{{ _item.desc }}</span
          >
          <span class="c-fs18 c-fc-gray c-pl8" @click="clickMoreClassList"
          >查看更多</span
          >
        </div>
        <class-Item :itemList="_item.items.data" :mb="3"></class-Item>
      </div>
      <!-- 预约师资 -->
      <div
        class="c-bd-b12-f5"
        v-if="
          _item.modelType == 5 &&
            _item.items.length > 0 &&
            companyAuth.enableReservationModule == 1
        "
      >
        <index-three-title-com
          class="c-pb30"
          :titleName="_item.name"
          :titleDesc="_item.desc"
          @clickMore="clickMoreBooking"
        ></index-three-title-com>
        <booking-com :bookingList="_item.items"></booking-com>
      </div>
      <keep-alive>
        <!-- 训练营 -->
        <camp-index-com
          :trainingName="_item.name"
          :trainingDesc="_item.desc"
          :trainingList="_item.items"
          v-if="
            _item.modelType == 6 &&
              _item.items.length > 0 &&
              companyAuth.enableTrainingModule == 1
          "
        ></camp-index-com>

        <!-- 打卡 -->
        <clock-index-com
          :clockInList="_item.items.data"
          :clockInTitles="_item.name"
          :clockInDesc="_item.desc"
          v-if="
            _item.modelType == 9 &&
              _item.items.data.length > 0 &&
              companyAuth.enableSignCardModule == 1
          "
        ></clock-index-com>
        <!-- 词典 -->
        <word-index-com
          :wordName="_item.name"
          :wordDesc="_item.desc"
          :wordList="_item.items.data"
          v-if="
            _item.modelType == 10 &&
              _item.items.data.length > 0 &&
              companyAuth.enableDictionaryModule == 1
          "
        ></word-index-com>
        <!-- 直播 -->
        <index-live-com
          :liveName="_item.name"
          :liveDesc="_item.desc"
          :liveList="_item.items.data"
          v-if="
            _item.modelType == 11 &&
              _item.items.data.length > 0 &&
              companyAuth.enableTeleviseLive == 1
          "
        ></index-live-com>
        <!-- 直播间 -->
        <index-personallive-com :liveName='_item.name' :liveDesc='_item.desc' :liveList='_item.items.data' v-if="_item.modelType==54 && _item.items.data.length > 0 && companyAuth.enableLivePersonalModule == 1"></index-personallive-com>
        <!-- 约课  -->
        <reservation-item
          :reservationList="_item.items.data"
          :reservationTitles="_item.name"
          :reservationDesc="_item.desc"
          v-if="
            _item.modelType == 12 &&
              _item.items.data.length > 0 &&
              companyAuth.enableReservationModule == 1
          "
        ></reservation-item>

        <!-- 面授课  -->
        <edu-index-com
          :eduList="_item.items.data"
          :eduName="_item.name"
          :eduDesc="_item.desc"
          v-if="
            _item.modelType == 30 &&
              _item.items.data.length > 0 &&
              companyAuth.enableEducationSystemModule == 1
          "
        ></edu-index-com>

        <!-- 特惠专区 限时购 -->
        <flash-sales-item
          :bargainList="
            _item.items && companyAuth.enableBargain == 1
              ? _item.items.bargains
              : []
          "
          :collageList="
            _item.items && companyAuth.enableCollage == 1
              ? _item.items.collageList
              : []
          "
          :flashSalesList="
            _item.items && companyAuth.enableFlashSalesModule == 1
              ? _item.items.flashSales.data
              : []
          "
          :friendHelperList="
            _item.items && companyAuth.enableFriendHelper == 1
              ? _item.items.friendHelper
              : []
          "
          :flashSalesTitles="_item.name"
          :flashSalesDesc="_item.desc"
          v-if="
            _item.modelType == 14 &&
              _item.items &&
              (_item.items.collageList.length > 0 ||
                _item.items.friendHelper.length > 0 ||
                _item.items.flashSales.data.length > 0) &&
              (companyAuth.enableFlashSalesModule == 1 ||
                companyAuth.enableCollage == 1 ||
                companyAuth.enableFriendHelper == 1)
          "
        >
        </flash-sales-item>

        <!-- 知识套餐 -->
        <package-index-com
          :packageList="_item.items.data"
          :packageTitles="_item.name"
          :packageDesc="_item.desc"
          v-if="
            _item.modelType == 15 &&
              _item.items.data.length > 0 &&
              companyAuth.enableComboModule == 1
          "
        ></package-index-com>
        <!-- 交互测评 -->
        <mutua-index-com
          :mutuaList="_item.items.data"
          :mutuaTitles="_item.name"
          :mutuaDesc="_item.desc"
          v-if="
            _item.modelType == 17 &&
              _item.items.data.length > 0 &&
              companyAuth.enableMutualTestModule == 1
          "
        ></mutua-index-com>
        <!-- 语音测试 -->
        <voice-index-com
          :voiceList="_item.items.data"
          :mutuaTitles="_item.name"
          :mutuaDesc="_item.desc"
          v-if="
            _item.modelType == 8 &&
              _item.items.data.length > 0 &&
              companyAuth.enableSpeechTestModule == 1
          "
        ></voice-index-com>
        <!-- 活动 -->
        <activity-item
          :activityName="_item.name"
          :activityDesc="_item.desc"
          :itemList="_item.items"
          v-if="
            _item.modelType == 32 &&
              _item.items.length > 0 &&
              companyAuth.enableActivityModule == 1
          "
        ></activity-item>
        <!-- 分销商城 -->
        <distribution-index-com
          :distributionName="_item.name"
          :distributionDesc="_item.desc"
          :distributionList="_item.items.data"
          v-if="
            _item.modelType == 22 &&
              _item.items.data.length > 0 &&
              companyAuth.enableDistributionMarketModule
          "
        ></distribution-index-com>
      </keep-alive>
      <!-- 课程分类 -->
      <template v-if="_item.modelType == 13 && _item.items.length > 0">
        <index-three-title-com
          :titleName="_item.name"
          :titleDesc="_item.desc"
          :showMore="_item.categoriesCount > 4"
          @clickMore="clickAllCategory"
        ></index-three-title-com>
        <div
          class="c-flex-row c-flexw-wrap c-justify-sb c-ph24 c-bd-b12-f5  c-pb40 "
        >
          <div
            @click="
              clickSubCategory(
                item.level1CatId,
                item.level2CatId,
                item.level3CatId,
                item.name
              )
            "
            v-for="(item, index) in _item.items"
            :key="index"
            class="c-ww288 c-pt30"
          >
            <div class="c-ww288 c-maxh192 c-text-hidden c-br10">
              <img
                class="c-w100 imgCloseBig c-maxh192"
                :src="
                  item.avatar != '' && item.avatar != null
                    ? item.avatar
                    : require('../../../assets/defult270.png')
                "
                @error="item.avatar = require('../../../assets/defult270.png')"
                alt=""
              />
            </div>
          </div>
        </div>
      </template>
      <!-- 专栏模块 -->
      <template
        v-if="
          _item.modelType == 16 &&
            _item.items.length > 0 &&
            companyAuth.enableColumnModule == 1
        "
      >
        <index-three-title-com
          :titleName="_item.name"
          :titleDesc="_item.desc"
          @clickMore="goColumn"
        ></index-three-title-com>
        <div class="c-ph24 c-bd-b12-f5 c-pb30">
          <div
            v-for="(item, index) in _item.items"
            :key="index"
            class="c-flex-row c-pt24"
            @click="clickColumn(item.columnId)"
          >
            <div class="c-pb24">
              <div class="c-ww210 c-maxh210 c-text-hidden c-p c-br10">
                <img
                  class="c-w100 imgCloseBig c-br10"
                  :src="$addXossFilter(item.cover)"
                  @error="item.cover = require('../../../assets/defult270.png')"
                />
                <vip-status :item="item"></vip-status>
                <div
                  class="c-pa c-p-b0 c-p-r0 c-fc-white c-fs12 c-textAlign-c c-ww80 c-hh24 c-lh24 theme-bg c-br-tl10"
                  v-if="item.isUpdating == 1 && enableColumnRelates == 1"
                >
                  更新中
                </div>
              </div>
            </div>
            <div class="c-ml20 c-flex-grow1 c-w0 c-flex-column c-justify-sb c-pb24" :class="index == _item.items.length - 1 ? '' : 'c-bd-b1'">
              <div class="c-fs24 c-text-ellipsis2 c-lh36">{{ item.name }}</div>
              <div class="c-flex-row c-aligni-center">
                <div
                  class="theme-fc c-flex-grow1 c-w0"
                  :class="item.payType == 2 ? 'c-fs24' : 'c-fs22'"
                >
                  <span v-if="item.payType == 2">{{
                    "￥" | iosPriceFilter
                  }}</span>{{item.payType | priceValueFilter(item.price, 9)}}
                </div>
                <span
                  v-if="item.payType == 2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(9)))"
                  class="c-fs18 c-fc-gray"
                >{{
                  (item.initSales + item.subscribers) | formatNumber
                }}人{{$isWxAppIos() ? '观看' : '购买'}}</span
                >
                <span v-else-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(9))" class="c-fs18 c-fc-gray"
                >{{ item.clicks | formatNumber }}次观看</span>
              </div>
            </div>
          </div>
          <div
            @click="goColumn"
            v-if="_item.items.length > 0"
            class="c-mt30 c-flex-row c-flex-center c-fs20 c-fc-gray"
          >
            点击查看更多
            <span class="iconfont c-fs18 c-fc-gray">&#xe60e;</span>
          </div>
        </div>
      </template>
      <!-- 测评模块 -->
      <template
        v-if="
          _item.modelType == 7 &&
            _item.items.data.length > 0 &&
            companyAuth.enableExamModule == 1
        "
      >
        <index-three-title-com
          :titleName="_item.name"
          :titleDesc="_item.desc"
          @clickMore="clickMoreExamination"
        ></index-three-title-com>
        <div class="c-bd-b12-f5 c-pb30">
          <div
            class="c-flex-row c-ph24 c-pt24"
            v-for="(item, index) in _item.items.data"
            :key="index"
            @click="clickExaminationItem(item.topicId)"
          >
            <div class="c-pb24">
              <div class="c-ww210 c-maxh210 c-text-hidden c-p c-br10">
                <img
                  class="c-w100 c-maxh210 c-br10"
                  :src="
                    item.avatar == '' || item.avatar == ' ' || item.avatar == null
                      ? require('../../../assets/examination_defult.png')
                      : item.avatar
                  "
                  @error="
                    item.avatar = require('../../../assets/examination_defult.png')
                  "
                  alt=""
                />
                <vip-status :item="item"></vip-status>
              </div>
            </div>
            <div class="c-w0 c-flex-grow1 c-flex-column c-justify-sb c-ml20 c-pb24" :class=" index == _item.items.data.length - 1 ? '' : 'c-bd-b1'">
              <div class="c-fs24 c-text-ellipsis2 c-lh36">{{ item.name }}</div>
              <div class="c-flex-row c-aligni-center c-fc-gray c-fs18">
                <div class="theme-fc c-w0 c-flex-grow1" :class="item.payType == 2 ? 'c-fs24' : 'c-fs22'">
                  <span v-if="item.payType == 2">{{"￥" | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 11)}}
                </div>
                <span class="iconfont c-mr16 c-fc-gray c-fs20">&#xe786;</span>
                <span class="c-lh">{{ item.subscribers }}</span>
                <span class="c-ph10">|</span>
                <span class="c-lh">考试{{ item.hasPaper }}套</span>
              </div>
            </div>
          </div>
          <div
            @click="clickMoreExamination"
            v-if="_item.items.data.length > 0"
            class="c-mh24 c-mt30 c-flex-row c-flex-center c-fs20 c-fc-gray"
          >
            点击查看更多
            <span class="iconfont c-fs20">&#xe60e;</span>
          </div>
        </div>
      </template>
      <!--考试-->
      <section
        class="c-bd-b12-f5 c-pv24 c-ph24 c-bg-white c-flex-column c-pt40"
        v-if="
          _item.modelType == 31 &&
            _item.enableModule == 1 &&
            _item.items.data.length > 0 &&
            companyAuth.enableExamModule == 1
        "
      >
        <div class="c-flex-row c-justify-sb c-aligni-center">
          <span class="c-fw-b c-fs30 c-lh c-pl20 c-p">
            <span
              class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"
            ></span>
            <span>{{ _item.name ? _item.name : "考试" }}</span>
          </span>
          <span
            class="c-fs20 c-fc-sblack c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1"
          >{{ _item.desc }}</span
          >
          <span
            class="c-fs20 c-fc-gray c-pl8"
            :class="_item.isShowMore == 1 ? 'hide' : ''"
            @click="clickMoreTestPaper"
          >{{ "查看更多 >" }}</span
          >
        </div>
        <testPaper-item
          :itemList="_item.items.data"
          :isFromM7="false"
          :itemType="1"
          :mb="3"
          :showCount="_item.items.count"
        ></testPaper-item>
      </section>
      <!--练习-->
      <section
        class="c-bd-b12-f5 c-pv24 c-ph24 c-bg-white c-flex-column c-pt40"
        v-if="
          _item.modelType == 33 &&
            _item.enableModule == 1 &&
            _item.items.data.length > 0 &&
            companyAuth.enableQuestionBankModule == 1
        "
      >
        <div class="c-flex-row c-justify-sb c-aligni-center">
          <span class="c-fw-b c-fs30 c-lh c-pl20 c-p">
            <span
              class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"
            ></span>
            <span>{{ _item.name ? _item.name : "练习" }}</span>
          </span>
          <span
            class="c-fs20 c-fc-sblack c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1"
          >{{ _item.desc }}</span
          >
          <span
            class="c-fs20 c-fc-gray c-pl8"
            :class="_item.isShowMore == 1 ? 'hide' : ''"
            @click="clickMoreQuestion"
          >{{ "查看更多 >" }}</span
          >
        </div>
        <question-item
          :itemList="_item.items.data"
          :isFromM7="false"
          :itemType="1"
          :mb="3"
          :showCount="_item.items.count"
        ></question-item>
      </section>
      <!-- 社群模块 -->
      <template
        v-if="
          _item.modelType == 18 &&
            _item.items.length > 0 &&
            companyAuth.enableSocialGroup == 1
        "
      >
        <index-three-title-com
          :titleName="_item.name"
          :titleDesc="_item.desc"
          @clickMore="clickMoreSocialGroup"
        ></index-three-title-com>
        <div class="c-ph24  c-bd-b12-f5 c-pt30">
          <div
            class="c-w100 c-contexty-hidden c-contextX-scroll c-flex-row c-ws-n"
          >
            <div
              @click="clickSocailGroupItem(item.socialRoomId)"
              v-for="(item, index) in _item.items"
              :key="index"
              class="c-textAlign-c c-ww180"
              :class="index == _item.items.length - 1 ? '' : 'c-pr20'"
            >
              <img
                class="c-ww100 c-hh100 c-brp50 c-center imgCloseBig"
                :src="item.avatar"
              />
              <div
                class="c-fs24 c-pt16 c-pb16 c-lh c-ww160 c-center c-text-ellipsis1"
              >
                {{ item.name }}
              </div>
              <div
                class="c-ww100 c-mb40 c-fs20 c-hh48 c-lh48 c-center c-textAlign-c theme-fc theme-bd1 c-br36"
              >
                加入
              </div>
            </div>
          </div>
        </div>
      </template>

      <!-- 精品课程 -->
      <template v-if="_item.modelType == 19">
        <index-three-title-com :titleName="_item.name" :titleDesc="_item.desc" @clickMore="clickGoCourse(0)"></index-three-title-com>
        <div class="c-bd-b12-f5 c-pb20 c-p">
          <div class="c-flex-row c-ph24 c-pt30 c-textAlign-c c-justify-sa">
            <div class="c-br24 c-pv10 c-bg-f2 c-lh26 c-ph40 c-hh48 c-flex-row c-aligni-center" @click="clickCourseAll">
              <span class="c-fs20 c-fc-xblack">全部</span>
              <span class="iconfont c-fs10 c-pl8 c-fc-sxblack" v-show="courseFiterType == 'CAT'">&#xe6ab;</span>
              <span class="iconfont c-fs10 c-pl8 c-fc-sxblack" v-show="courseFiterType != 'CAT'">&#xe6a9;</span>
            </div>
            <div class="c-br24 c-pv10 c-bg-f2 c-lh26 c-ph40 c-hh48 c-flex-row c-aligni-center" @click="clickCourseSort">
              <span class="c-fs20 c-fc-xblack">排序</span>
              <span class="iconfont c-fs10 c-pl8 c-fc-sxblack" v-show="courseFiterType == 'SORT'">&#xe6ab;</span>
              <span class="iconfont c-fs10 c-pl8 c-fc-sxblack" v-show="courseFiterType != 'SORT'">&#xe6a9;</span>
            </div>
            <div class="c-br24 c-pv10 c-bg-f2 c-lh26 c-ph40 c-hh48 c-flex-row c-aligni-center" @click="clickCourseFiter">
              <span class="c-fs20 c-fc-xblack">筛选</span>
              <span class="iconfont c-fs10 c-pl8 c-fc-sxblack" v-show="courseFiterType == 'FITER'">&#xe6ab;</span>
              <span class="iconfont c-fs10 c-pl8 c-fc-sxblack" v-show="courseFiterType != 'FITER'">&#xe6a9;</span>
            </div>
          </div>

          <div v-for="(item, index) in excellentCourse" :key="index" class="c-ph24 c-flex-row c-pt24" @click="clickCourseItem(item.courseId, item.courseType)">
            <div class="c-pb24">
              <div class="c-bd1 c-ww210 c-flex-shrink0 c-maxh210 c-text-hidden c-p c-br10">
                <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.courseAvatar, require('../../../assets/defult270.png'))" @error="item.courseAvatar = require('../../../assets/defult270.png')" alt="" />
                <img class="icon-course-mark" v-if="item.courseType == 0" src="../../../assets/i/wap/course/icon_video.png" alt="" />
                <img class="icon-course-mark" v-else-if="item.courseType == 1" src="../../../assets/i/wap/course/icon_audio.png" alt="" />
                <img class="icon-course-mark" v-else src="../../../assets/i/wap/course/icon_pic.png" alt="" />
                <vip-status :item="item" :showAllFree="true"></vip-status>
              </div>
            </div>
            <div class="c-flex-column c-flex-grow1 c-justify-sb c-ml20 c-pb24" :class="index == excellentCourse.length - 1 ? '' : 'c-bd-b1'">
              <div class="c-fs24 c-lh36 c-text-ellipsis2">
                {{ item.name }}
              </div>
              <div class="c-flex-row c-aligni-center c-fs18 c-fc-gray">
                <span class="iconfont c-pt4 c-mr8">&#xe62a;</span>
                <span class="c-maxw200 c-inlineblack c-vcAlign-middle c-text-ellipsis1">{{item.lecturer != "" && item.lecturer != null ? item.lecturer : "未知"}}</span>
              </div>
              <div class="c-fs18 c-flex-row c-aligni-center c-fc-gray">
                <div class="c-flex-grow1 c-w0 theme-fc c-flex-row c-aligni-center" :class="item.payType == 1 ? 'c-fs22' : 'c-fs24'">
                  <span v-if="item.payType == 2">{{ "￥" | iosPriceFilter }}</span>{{item.payType | priceValueFilter(item.price, 5)}}
                  <span v-if="(item.allowWholeWatch == 1 || (item.watchPermission == 1 && item.watchTime > 0)) && item.payType != 1 && item.courseType != 2" class="c-lh c-pv2 c-vcAlign-middle c-fs14 c-ph4 c-br4 theme-bg c-fc-white c-ml12">{{ item.courseType == 1 ? "试听" : "试看" }}</span>
                </div>
                <div v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(5))">
                  <span class="iconfont c-fc-gray c-pt4 c-fs18 c-mr10">&#xe6bb;</span>
                  <span v-if="item.plays != '' && item.plays != null">{{item.plays | formatNumber}}</span>
                  <span v-else>0</span>
                </div>
              </div>
            </div>
          </div>
          <div @click="clickGoCourse(1)" v-if="courseCount > 5" class="c-mh24 c-mt12 c-flex-row c-flex-center c-fs20 c-fc-gray">
            <span class="c-fs20 c-fc-gray c-pl8">点击查看更多</span>
            <span class="iconfont c-fs18 c-fc-gray">&#xe908;</span>
          </div>
          <loading-status-tem :noData="excellentCourse.length == 0 && loadingStatus == 'LOAD_END'" :noDataText="'暂无课程'"></loading-status-tem>
        </div>
      </template>


      <!-- 资料 -->
      <div
        class="img-database c-bd-b12-f5"
        @click="clickGoDatum"
        v-if="_item.modelType == 20 && companyAuth.enableDatumModule == 1"
      >
        <img
          src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/img_datum.jpg"
          alt=""
          class="imgCloseBig"
        />
      </div>
      <!-- 问答 -->
      <template
        v-if="
          _item.modelType == 21 &&
            companyAuth.enableQuestionModule == 1 &&
            _item.items.status == 1
        "
      >
        <index-three-title-com
          :titleName="_item.name"
          :titleDesc="_item.desc"
          @clickMore="clickGoQA"
        ></index-three-title-com>
        <div
          class="c-ph24 c-pt30 c-pb40 c-bd-b12-f5 c-flex-row"
          @click="clickGoQA"
        >
          <div class="c-ww210 c-hh140 c-text-hidden c-br10">
            <img class="c-w100" :src="$addXossFilter(_item.items.cover)" alt="" />
          </div>
          <div class="c-pl20 c-flex-grow1 c-w0 c-flex-column c-justify-sb">
            <div class="c-fs28 c-text-ellipsis2">{{ _item.items.title }}</div>
            <div class="c-fs18 c-fc-gray c-text-ellipsis2">
              {{ _item.items.describe }}
            </div>
            <div class="c-fs18 c-fc-blue">{{ questionCount }}个问答</div>
          </div>
        </div>
      </template>

      <!-- 友情链接 -->
      <template v-if="_item.modelType == 23 && _item.items.length > 0">
        <index-three-title-com
          :titleName="_item.name"
          :titleDesc="_item.desc"
          :showMore="false"
        ></index-three-title-com>
        <div class="c-ph24 c-pt30 c-pb40 c-bd-b12-f5">
          <div
            class="c-w100 c-hh100 c-contextX-scroll c-contexty-hidden c-ws-n"
          >
            <div
              v-for="(item, index) in _item.items"
              :key="index"
              @click="clickFirendLink(item.link)"
              class="c-inlineblack c-textAlign-c c-ww190 c-maxh100 c-text-hidden c-br10"
              :class="index == _item.items.length - 1 ? '' : 'c-mr12'"
            >
              <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.url)" alt="" />
            </div>
          </div>
        </div>
      </template>

      <!-- 电子书 -->
      <template v-if="_item.modelType == 34 && _item.items.length > 0 && _item.enableModule == 1 && companyAuth.enableEbookModule == 1">
        <ebooks-item :ebooksName="_item.name"
          :ebooksDesc="_item.desc"
          :ebooksList="_item.items">
        </ebooks-item>
      </template>
      <!-- 圈子 -->
      <template v-if="_item.modelType == 55 && _item.items.length > 0 && _item.enableModule == 1 && companyAuth.enableCircleModule == 1">
        <circle-item :circleName="_item.name" :circleDesc="_item.desc" :circleList="_item.items"></circle-item>
      </template>
      <div class="c-pv40 c-flex-row c-fs30" v-if="_item.modelType == 24">
        <div
          class="c-w0 c-flex-grow1 c-textAlign-c c-bd-r1-mgray"
          @click="clickCompanyIntro"
        >
          公司简介
        </div>
        <div class="c-w0 c-flex-grow1 c-textAlign-c" @click="clickContactUs">
          联系我们
        </div>
      </div>
    </section>

    <show-integrate
      :showIntegrate="showIntegrate"
      :integrateCount="integrateCount"
      v-if="showIntegrate"
      @closeShareInt="showIntegrate = false"
    ></show-integrate>
    <!-- 精品课程筛选弹窗 -->
    <open-modal
      :openModal="showCourseFiterList"
      @closeModal="closeCourseFiterList"
      v-show="courseFiterList.length > 0"
    >
      <div class="fiterList c-bg-white" @click="closeCourseFiterList">
        <div class="fiterListBox">
          <div class="c-ph24">
            <div
              @click="clickCourseFiterItem(item.catId)"
              class="c-bd-b1-f6 c-pv20 c-fs24 c-lh34 c-flex-row c-aligni-center c-justify-end c-text-hidden c-fc-sblack"
              v-for="(item, index) in courseFiterList"
              :key="index"
              :class="
                item.catId == catSelectId ||
                  item.catId == sortSelectId ||
                  item.catId == fiterSelectId
                  ? 'theme-fc c-fw-b'
                  : ''
              "
            >
              <span class="c-mrauto">{{ item.name }}</span>
              <span
                class="iconfont c-fs16"
                v-show="
                  item.catId == catSelectId ||
                    item.catId == sortSelectId ||
                    item.catId == fiterSelectId
                "
              >&#xe82c;</span>
            </div>
          </div>
        </div>
      </div>
    </open-modal>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import questionItem from "@/components/templates/questionItem.vue";
import TestPaperItem from "@/components/templates/testPaperItem.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import showIntegrate from "@/components/templates/common/showIntegrate.vue";
import indexLiveCom from "@/components/templates/indexLiveCom.vue";
import clockIndexCom from "@/components/templates/clockIndexCom.vue";
import wordIndexCom from "@/components/templates/wordIndexCom.vue";
import packageIndexCom from "@/components/templates/packageIndexCom.vue";
import mutuaIndexCom from "@/components/templates/mutuaIndexCom.vue";
import voiceIndexCom from "@/components/templates/voiceIndexCom.vue";
import reservationItem from "@/components/templates/reservationItem.vue";
import distributionIndexCom from "@/components/templates/distributionIndexCom.vue";
import flashSalesItem from "@/components/templates/flashSalesItem.vue";
import campIndexCom from "@/components/templates/campIndexCom.vue";
import bookingCom from "@/components/templates/bookingCom.vue";
import indexThreeTitleCom from "@/components/templates/common/indexThreeTitleCom.vue";
import classItem from "@/components/templates/classItem.vue";
import eduIndexCom from "@/components/templates/eduIndexCom.vue";
import activityItem from "@/components/templates/activityItem.vue";
import ebooksItem from "@/components/templates/ebooks/ebooksItem.vue";
import circleItem from "@/components/templates/circle/circleItem.vue";
import { goDetails } from "@/utils/goDetails.js";
import OpenModal from "@/components/templates/common/openModal.vue";
import indexPersonalliveCom from "@/components/templates/indexpersonalliveCom.vue";
import vipStatus from '@/components/templates/common/vipStatus.vue'
import { officialIndex } from "@/mixin/officialIndex.js";
let courseAllCategory = []; //所有分类
let isClick = false;
export default {
  name: "IndexThree",
  mixins: [officialIndex],
  components: {
    swiper,
    indexPersonalliveCom,
    swiperSlide,
    loadingStatusTem,
    showIntegrate,
    indexLiveCom,
    clockIndexCom,
    packageIndexCom,
    mutuaIndexCom,
    voiceIndexCom,
    reservationItem,
    distributionIndexCom,
    flashSalesItem,
    wordIndexCom,
    campIndexCom,
    bookingCom,
    indexThreeTitleCom,
    classItem,
    eduIndexCom,
    activityItem,
    questionItem,
    OpenModal,
    ebooksItem,
    TestPaperItem,
    circleItem,
    vipStatus,
  },
  props: {
    colorName: {
      type: String,
      default: "mb3_orange"
    },
    isSign: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      categoryLevel: localStorage.getItem("categoryLevel")
        ? Number(localStorage.getItem("categoryLevel"))
        : 1,
      categoryTheme: JSON.parse(localStorage.getItem("categoryTheme")),
      getAlready: false,
      showSwiperList: true, //解决回到首页轮播图不轮播bug
      showIntegrate: false, //获取积分提示
      integrateCount: 0,
      isBCompany: localStorage.getItem("companyId") == "ldwk" ? 1 : 0,
      loadingStatus: "LOADING",
      headImgUrl: "", //用户头像
      theme: "",
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      customName: JSON.parse(localStorage.getItem("customName")),
      isShowMemberTips: false, // 是否显示续费
      memberTips: "您的会员即将到期，", // 会员提示语
      userRoleState: {
        1: "非会员",
        2: "VIP",
        3: JSON.parse(localStorage.getItem("customName")).agentName,
        4: "SVIP",
        5: JSON.parse(localStorage.getItem("customName")).partnerName,
        6: JSON.parse(localStorage.getItem("customName")).branchName
      },
      svipStatus: -1,
      courseFiterList: [], //课程筛选条件
      courseFiterType: "", //课程筛选选中
      catSelectId: "0", //分类选中ID
      sortSelectId: "", //排序选中ID
      fiterSelectId: "", //筛选选中ID
      userRole: 1, //当前用户身份 1普通用户； 2高级会员（开通年会员99元）3 代理商 4 svip 5.合伙人 6.分公司
      courseType: 0,
      upgradeMemberJump: '',
      customTitles: {}, //自定义导航
      excellentCourse: [], //精品课程
      courseCount: 0,
      questionCount: 0,
      showExpire: false, // 时间是否到期
      isShowCS: false, //客服
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          bulletActiveClass: "theme-bg"
        },
        loop: true,
        speed: 300,
        autoplay: {
          disableOnInteraction: false
        },
        autoHeight: true,
        updateOnImagesReady: true,
        observer: true,
        on: {
          tap: function (event) {
            let linkUrl = event.srcElement.dataset.url;
            if (linkUrl) {
              if (!linkUrl.includes("http") && !linkUrl.includes("https")) {
                linkUrl = "http://" + linkUrl;
              }
              utilJs.locationHref(linkUrl, this);
            }
          }
        }
      },
      modules: [],
      subTypeArr: [], //服务商拓展名称
      hasSubType: false,
      subName: "",
      showCourseFiterList: false, //显示下拉框
      isVisitor: localStorage.getItem("isVisitor") || 0, //1是游客
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
      enableColumnRelates: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableColumnRelates : 1,
    };
  },
  mounted() {
    this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
    this.customName = JSON.parse(localStorage.getItem("customName"));
    let expireTime = new Date().getTime() + 1000 * 60;
    // 解决有时候白屏问题
    if (this.companyAuth) {
        expireTime = utilJs.getTimeByDate(this.companyAuth.expireTime);
    }
    // 判断体验版是否到期，到期之后不可购买商品
    this.showExpire =
      expireTime - new Date().getTime() <
      0;
    if (!this.showExpire) {
      isClick = false;
      this.courseType = 0;
      this.courseFiterList = []; //课程筛选条件
      this.courseFiterType = ""; //课程筛选选中
      this.catSelectId = "0"; //分类选中ID
      this.sortSelectId = ""; //排序选中ID
      this.fiterSelectId = ""; //筛选选中ID
      courseAllCategory = [];
      this.subTypeArr = [];
      this.hasSubType = false;
      this.subName = "";
      this.getIndexInfo();
      this.getCourseCategory();
      this.getCourseList();
      this.theme = this.colorName;
      this.loadingStatus = "LOADING";
      this.showIntegrate = false;
    } else {
      let isExireTime = new Date().getTime() - expireTime > 7776000000; // 过期时间超过3个月
      this.$cjConfirm({
        title: '店铺已打烊',
        message: `打烊期间无法购买商品，${isExireTime ? '无法访问!' : '所有服务停止!'}`,
        showCancelButton: false,
        clickCloseModal: false,
        onConfirm:() => {
          // 店铺已打烊提示消失后执行
          isClick = false;
          courseAllCategory = [];
          this.courseType = 0;
          this.courseFiterList = []; //课程筛选条件
          this.courseFiterType = ""; //课程筛选选中
          this.catSelectId = "0"; //分类选中ID
          this.sortSelectId = ""; //排序选中ID
          this.fiterSelectId = ""; //筛选选中ID
          this.getIndexInfo();
          this.getCourseCategory();
          this.getCourseList();
          this.theme = this.colorName;
          this.loadingStatus = "LOADING";
          this.showIntegrate = false;
        }
      })
    }
    this.$nextTick(function () {
      window.addEventListener("scroll", this.swiperScroll);
    });
  },
  computed: {},
  watch: {
    $route(to, from) {
      if (to.path == "/") {
        isClick = false;
        this.courseType = 0;
        this.courseFiterList = []; //课程筛选条件
        this.courseFiterType = ""; //课程筛选选中
        this.catSelectId = "0"; //分类选中ID
        this.sortSelectId = ""; //排序选中ID
        this.fiterSelectId = ""; //筛选选中ID
        courseAllCategory = [];
        this.getIndexInfo();
        this.getCourseCategory();
        this.getCourseList();
        this.theme = this.colorName;
        this.loadingStatus = "LOADING";
        this.showIntegrate = false;
      }
    }
  },
  methods: {
    // 弹出班主任
    changeShowAddTeacher() {
      this.$store.commit('updateShowAddTeacher', true);
    },
    swiperClick(linkUrl) {
      if (linkUrl) {
        if (!linkUrl.includes("http") && !linkUrl.includes("https")) {
          linkUrl = "http://" + linkUrl;
        }
        utilJs.locationHref(linkUrl, this);
      }
    },
    swiperScroll: function () {
      let swap = document.getElementById("swap");
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (!swap) {
        return;
      }
      if (
        swap.offsetTop > scrollTop + clientHeight ||
        swap.offsetTop + swap.offsetHeight < scrollTop
      ) {
        if (this.$refs.swiperMy[0].swiper != undefined) {
          this.$refs.swiperMy[0].swiper.autoplay.stop();
        }
      } else {
        if (this.$refs.swiperMy[0].swiper != undefined) {
          this.$refs.swiperMy[0].swiper.autoplay.start();
        }
      }
    },
    // 点击签到
    clickSign() {
      if (!this.isSign && !isClick) {
        isClick = true;
        let $this = this;
        utilJs.postMethod(
          global.apiurl + "members/pointSign",
          { userId: localStorage.getItem("userId") },
          res => {
            this.isSign = true;
            isClick = false;
            $this.integrateCount = res.point;
            $this.showIntegrate = true;
          },
          () => {
            isClick = false;
          }
        );
      }
    },
    //点击头像进入个人中心
    goMember() {
      this.$routerGo(this, "push", { path: "/member/menberInfo/infoIndex" });
    },
    //获取首页相关数据
    getIndexInfo() {
      let that = this;
      this.showSwiperList = false;
      this.$nextTick(() => {
        this.showSwiperList = true;
      });
      utilJs.getMethod(
        global.apiurl + "company/getOfficialIndex?mb=3",
        function (res) {
          that.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
          that.customName = JSON.parse(localStorage.getItem("customName"));
          that.svipStatus = res.svipStatus;
          that.$store.commit('updateUserVipType', res.userType);
          localStorage.setItem("vipType" + res.userId, res.userType);
          if (
            (res.userType == 2 || res.userType == 4) &&
            res.vipDay <= 7 &&
            res.vipDay >= 0
          ) {
            let userTypeName = res.userType == 2 ? "VIP" : "SVIP";
            if (Number(res.vipDay) == 0) {
              that.memberTips =
              "您的" + userTypeName + "会员今天过期，";
            } else {
              that.memberTips =
              "您的" + userTypeName + "会员还有" + res.vipDay + "天过期，";
            }
            that.isShowMemberTips = true;
          } else {
            that.isShowMemberTips = false;
          }
          that.userRole = res.userType;
          that.upgradeMemberJump = res.upgradeMemberJump
          that.userRoleState = utilJs.getCustNameMap({1: '非会员'});
          that.subTypeArr = res.subTypeName ? res.subTypeName : [];
          if (that.subTypeArr && that.subTypeArr.length > 0) {
            that.hasSubType = true;
            res.subType = res.subType ? res.subType : 0;
            let tItem = that.subTypeArr.filter(item => {
              return item.subType == res.subType;
            });
            if (tItem && tItem.length > 0) {
              that.subName = tItem[0].name;
            }
          }
          that.modules = res.modules;
          that.modules.forEach(el => {
            if (el.modelType == 1 && el.items.length == 1) {
              that.swiperOption.autoplay = false;
              that.swiperOption.loop = false;
            }
          });
          that.headImgUrl = res.headImgUrl;
          that.questionCount = res.questionCount;
          that.loadingStatus = "LOAD_END";
          let title = window.localStorage.getItem("shareTitle") || window.localStorage.getItem("companyName");
          let shareImg = window.localStorage.getItem("shareLogo");
          let shareDesc = window.localStorage.getItem("shareDesc");
          let shareUrl =
            window.location.href.split("#")[0] +
            "#" +
            that.$route.path +
            "?refereeId=" +
            localStorage.getItem("userId");
          utilJs.wechatConfig(
            shareUrl,
            title,
            shareImg,
            shareDesc,
            function () {}
          );
          that.showCourseFiterList = false;
        }
      );
    },
    //获取所有分类
    getCourseCategory() {
      utilJs.getMethod(global.apiurl + "courses/catgorySidebar", function (res) {
        courseAllCategory = res;
      });
    },
    //获取课程列表
    getCourseList() {
      if (this.catSelectId == "0") {
        this.sortSelectId = "";
        this.fiterSelectId = "";
      }

      utilJs.getMethod(
        global.apiurl +
          "courses/home?catId=" +
          this.catSelectId +
          "&sort=" +
          this.sortSelectId +
          "&p=" +
          this.fiterSelectId +
          "&page=1",
        res => {
          this.excellentCourse = res.data;
          this.courseCount = res.total;
        }
      );
    },
    //点击课程筛选条件
    clickCourseFiterItem(id) {
      if (this.courseFiterType == "CAT") {
        this.catSelectId = id;
        this.sortSelectId = "";
        this.fiterSelectId = "";
      } else if (this.courseFiterType == "SORT") {
        this.sortSelectId = id;
        this.catSelectId = "";
        this.fiterSelectId = "";
      } else if (this.courseFiterType == "FITER") {
        this.fiterSelectId = id;
        this.catSelectId = "";
        this.sortSelectId = "";
      }
      this.getCourseList();
      this.courseFiterType = "";
      this.courseFiterList = [];
    },
    //领取优惠券
    getCoupon(couponId) {
      let $this = this;
      if (
        localStorage.getItem("enableBindPhoneInRedeemCode") == 1 &&
        !localStorage.getItem("uMobile")
      ) {
        utilJs.goBindMobile();
      } else {
        utilJs.postMethod(
          global.apiurl + "redeemCodes/collectRedeemCodeId/" + couponId,
          {source: 2}, //从首页领取
          function (res) {
            if (res.status == 8 || res.status == 15) {
              $this.$showCjToast({
                text: "领取成功",
                type: "success"
              });
            } else if (res.status == 13) {
              utilJs.goBindMobile();
            } else {
              $this.$showCjToast({
                text: res.detail,
                type: "warn"
              });
            }
          }
        );
      }
    },
    //点击升级会员
    clickVipUp() {
      let type = global.ckFrom.vip
      if (this.upgradeMemberJump == 2) {
        type = global.ckFrom.svip
      }
      goDetails(this, type, '', '', '', 1)
    },
    clickShowQR() {
      this.$store.commit("updateShowAttentionQr", true);
    },
    //点击观看记录
    clickWatchList() {
      this.$routerGo(this, "push", {
        path: "/member/watchList/watchList",
        query: { ckFrom: global.ckFrom.course }
      });
    },
    //点击我要推广
    clickSpread() {
      this.$routerGo(this, "push", { path: "/homePage/spread/spreadIndex" });
    },
    //点击我的积分
    clickGoMyPoints() {
      this.$routerGo(this, "push", { path: "/member/myIntegral/integralDetail" });
    },
    //点击我的同学
    clickGoMyClassmates(e) {
      this.$routerGo(this, "push", { path: "/member/classmates/classmatesIndex" });
    },
    //点击奖学金
    clickGoScholarship(e) {
      this.$routerGo(this, "push", { path: "/member/scholarship/scholarshipIndex" });
    },
    //点击代理商
    clickGoAgent(e) {
      this.$routerGo(this, "push", { path: "/homePage/agent/agentIndex" });
    },
    //点击关闭课程弹窗
    closeCourseFiterList() {
      this.$nextTick(() => {
        if (document.querySelector("")) {
          document.querySelector(".nav-bottom-bar").style.display = "flex";
        }
      });
      this.showCourseFiterList = false;
      this.courseFiterType = "";
      this.courseFiterList = [];
    },
    //点击课程全部
    clickCourseAll() {
      if (this.courseFiterType == "CAT") {
        this.courseFiterType = "";
        this.courseFiterList = [];
        return;
      }
      this.courseFiterType = "CAT";
      let allArr = [
        {
          catId: "0",
          name: "全部",
          childs: []
        }
      ];
      this.$nextTick(() => {
        if (document.querySelector(".nav-bottom-bar")) {
          document.querySelector(".nav-bottom-bar").style.display = "none";
        }
      });
      this.courseFiterList = [...allArr, ...courseAllCategory];
      this.showCourseFiterList = this.courseFiterList.length > 0 ? true : false;
    },
    //点击课程排序
    clickCourseSort() {
      if (this.courseFiterType == "SORT") {
        this.courseFiterType = "";
        this.courseFiterList = [];
        return;
      }
      this.courseFiterType = "SORT";
      this.courseFiterList = [
        {
          catId: "hot",
          name: "热门"
        },
        {
          catId: "new",
          name: "最新"
        }
      ];
      this.$nextTick(() => {
        if (document.querySelector(".nav-bottom-bar")) {
          document.querySelector(".nav-bottom-bar").style.display = "none";
        }
      });
      this.showCourseFiterList = true;
    },
    //点击课程筛选
    clickCourseFiter() {
      if (this.courseFiterType == "FITER") {
        this.courseFiterType = "";
        this.courseFiterList = [];
        return;
      }
      this.courseFiterType = "FITER";
      this.courseFiterList = [
        {
          catId: "18",
          name: "收费"
        },
        {
          catId: "17",
          name: "VIP免费"
        },
        {
          catId: "20",
          name: "SVIP免费"
        },
        {
          catId: "19",
          name: "免费"
        }
      ];
      this.$nextTick(() => {
        if (document.querySelector(".nav-bottom-bar")) {
          document.querySelector(".nav-bottom-bar").style.display = "none";
        }
      });
      this.showCourseFiterList = true;
    },
    clickGoCourse(goType) {
      //点击精品课程查看
      let sortType = this.sortSelectId == 'new' ? 1 : 2;
      if (!goType) {
        goDetails(this, global.ckFrom.course, '', {isList: 1}, '', 1, sortType);
      } else {
        let catId = this.catSelectId;
        let sort = this.sortSelectId;
        let permition = this.fiterSelectId;
        goDetails(this, global.ckFrom.course, '', {
          catId: catId,
          sort: sort,
          permition: permition,
          isList: 1
        }, '', 1, sortType);
      }
    },
  },
  destroyed() {
    window.removeEventListener("scroll", this.swiperScroll);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.icon-index-spread {
  color: #26bb82;
}
.icon-index-course {
  color: #d8bf78;
}
.icon-index-attention {
  color: #f5af5e;
}
.icon-index-column {
  color: #7fccf7;
}
.icon-index-watch {
  color: #589dee;
}
.img-course-colum {
  width: 100%;
  height: 4.5rem;
  overflow: hidden;
}
.img-database {
  width: 100%;
  height: 5.65rem;
  overflow: hidden;
}
.c-tips {
  top: 0;
  color: red;
  z-index: 1000;
}

.triangle-left {
  width: 0;
  height: 0;
  border-top: 0.3rem solid transparent;
  border-right: 0.25rem solid #1ba3e4;
  border-bottom: 0.3rem solid transparent;
}

div img {
  display: block;
}

.in {
  animation: showin 2s ease-in-out;
  -webkit-animation: showin 2s ease-in-out;
}
.out {
  animation: showout 2s ease-in-out;
  -webkit-animation: showout 2s ease-in-out;
}
.c-fs18px {
  font-size: 18px;
}
@keyframes showin {
  0% {
    height: 0;
  }

  100% {
    height: 100%;
  }
}
@keyframes showout {
  0% {
    height: 100%;
  }

  100% {
    height: 0;
  }
}
.vipStatus {
  position: absolute;
  top: 0;
  left: 0;
  /* width: 2.5rem;
    height: 2.5rem; */
  width: 1.5rem;
  height: 1.5rem;
}
.icon-course-mark {
  position: absolute;
  bottom: 0.2rem;
  right: 0.2rem;
  width: 0.9rem;
  height: 0.9rem;
}
.couponStyle {
  width: 6.75rem;
  box-shadow: 0px 0.15rem 0.25rem 0px rgba(0, 0, 0, 0.06);
  margin-bottom: 0.15rem;
}
.coupon-bg {
  background: url("../../../../public/i/wap/coupon/coupon_top.png") no-repeat;
  background-size: 100%;
  height: 2.55rem;
}
.exchange-bg {
  background: url("../../../../public/i/wap/coupon/exchange_top.png") no-repeat;
  background-size: 100%;
  height: 2.55rem;
}
.fc-coupon {
  color: #ee6d3f;
}
.c-bg-4893F8 {
  background-color: #4893f8;
}
.mb3_orange .theme-bd-r2 {
  border-right: 2px solid #fe9901;
}
.mb3_blue .theme-bd-r2 {
  border-right: 2px solid #0099ff;
}
.mb3_ruby .theme-bd-r2 {
  border-right: 2px solid #d60808;
}
.mb3_green .theme-bd-r2 {
  border-right: 2px solid #01cc00;
}
.mb3_blown .theme-bd-r2 {
  border-right: 2px solid #976800;
}
.img-ww72 {
  width: 1.8rem;
}
.c-mrauto {
  margin-right: auto;
}
.fiterList {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  overflow: hidden;
}
.fiterListBox {
  height: 15rem;
  overflow: scroll;
  margin-top: 0.4rem;
  -webkit-overflow-scrolling: touch; /* 解决ios滚动卡顿问题 */
}
</style>
